<template>
    <div>
        <template v-if="readonly">
            <div v-if="columnCount > 0">
                <div
                        class="ql-editor"
                        v-for="(item, i) in value"
                        :key="i"
                        style="display: inline-block;"
                        :style="{width: `${item.sizeOfPanel}%`}"
                        v-html="item.richText"
                >
                </div>
            </div>
        </template>
        <template v-else>
            <splitpanes
                    v-if="columnCount > 0"
                    class="default-theme"
                    :push-other-panes="false"
                    :dbl-click-splitter="false"
                    @pane-click="onPanelClick"
                    @resize="onResize"
                    @resized="onResized"
                    style="height: 200px"
            >
                <pane
                        v-for="(item, i) in value"
                        :key="i"
                        min-size="5"
                        :size="item.sizeOfPanel"
                        style="cursor: pointer;"
                >

                    <div class="panel-container">
                        <EditableRichText
                                :readonly="readonly"
                                :textAndIndex="{
                                        index: i,
                                        richText: item.richText,
                                    }"
                                @changed="onRichTextChanged"
                                :ref="`EditableRichText${i}`"/>
                    </div>
                </pane>
            </splitpanes>
        </template>
    </div>
</template>

<script>
    import {Pane, Splitpanes} from 'splitpanes'
    import 'splitpanes/dist/splitpanes.css'
    import {cloneDeep} from 'lodash'
    import EditableRichText from "./EditableRichText";

    export default {
        props: {
            readonly: {
                type: Boolean,
                default: () => false,
            },
            columnCount: {
                type: Number,
                default: () => 0,
            },
            value: {
                type: Array,
                default: () => [],
                /*
                 {
                    size: 33.3,
                    richText: "",
                 }
                 */
            },
        },
        data() {
            return {
                editing: false,

                GitCommitTest: 3
            }
        },
        components: {
            EditableRichText,
            Splitpanes,
            Pane
        },
        mounted() {
            if (this.columnCount !== this.value.length) {
                this.reset();
            }
        },
        watch: {
            columnCount() {
                this.reset();
            }
        },
        methods: {
            reset() {
                const newValue = [];
                let rest = 100.0;
                const sizeOfEverPanel = rest / this.columnCount;
                for (let i = 0; i < this.columnCount; i++) {
                    newValue.push({
                        sizeOfPanel: sizeOfEverPanel,
                        richText: "",
                    });
                }
                this.$emit('input', newValue);
            },
            onResize(panels) {
                const newValue = cloneDeep(this.value);
                for (let index = 0; index < panels.length; index++) {
                    newValue[index].sizeOfPanel = panels[index].size;
                }
                this.$emit('input', newValue);
            },
            onResized() {
            },
            onPanelClick(panel) {
                if (this.editing) {
                    return;
                }
                const index = panel.index;
                let s = `EditableRichText${index}`;
                console.log(s);
                let $ref = this.$refs[s][0];
                $ref.edit(index);
                this.editing = true;
            },
            onRichTextChanged(changedRichText) {
                const {richText, index} = changedRichText;
                const newValue = cloneDeep(this.value);
                newValue[index].richText = richText;
                this.$emit('input', newValue);

                setTimeout(() => {
                    this.editing = false;
                }, 500);
            },
        }
    }
</script>

<style scoped>
    .panel-container {
        min-height: 50px;
        cursor: pointer;
        height: 100%;
    }
</style>